<template>
  <div>
    <h1 ref="xx" @click="sb = '大随便'">App.vue -- {{ sb }}</h1>
    <my-son ref="son" />

    <div>
      <button @click="fn" v-if="show">开始登录</button>
      <input ref="inp" v-else type="text" placeholder="请输入密码">
    </div>
  </div>
</template>

<script>
import MySon from './components/MySon.vue'
export default {
  data() {
    return {
      show: true,
      sb: '随便'
    }
  },


  methods: {
    fn () {
      // 照理说：show变false，input要渲染，那应该能找到它呀
      // dom渲染是异步的，那就意味着要等当前的同步代码都执行完了，才会去渲染dom
      // 所以下面这句话，仅仅只是把show的值变成了false，但是dom还没渲染
      this.show = false

      // console.log(this.$refs.inp) // undefined
      // 调用input的focus方法
      // this.$refs.inp.focus()

      // $nextTick
      this.$nextTick( () => {
        // 这里的回调函数，一定是等本次dom渲染完毕调用的
        this.$refs.inp.focus()
      })

      // setTimeout(() => {
        
      // }, 400);
    }
  },
  components: {
    MySon
  },
  mounted () {
    // 最早能获取到dom的钩子
    // 以后在vue中不推荐用document.querySelector
    //
    // console.log( document.querySelector('h1') )

    // 它除了能找dom元素，还可以找到组件对象
    console.log('$refs找：', this.$refs.xx)

    // 找到这个组件对象，相当于这个组件内部的this
    console.log('$refs找：', this.$refs.son)
    // 用$refs有个妙用：快速父传子
    this.$refs.son.msg = 'son的抠你鸡娃'
    // 还能调用子组件里的方法
    this.$refs.son.fn1()
  }
}
</script>

<style></style>
